<!--精品课-->
<template lang="pug">
  kalix-master
    div.box.w
      div.title-img
        <!--img(src="/static/PublicCourse/banner_u994.png")-->
        img(:src="topSrc")
      // 位置
      div.place
        span 当前位置 : &nbsp;&nbsp;
        router-link(v-bind:to="{name:'Index'}") 首页&nbsp;>&nbsp;
        span.gongkai 精品课
      //搜索框
      div.search-two
        div.search-one
          //搜索图标
          div.search-three
            img(src="/static/PublicCourse/搜索_u976.png" @click="getName()")
        div.search
          input(v-model="courseName" type="text" placeholder="请输入课程名称"  onfocus="this.placeholder=''" onblur="this.placeholder='请输入课程名称'")
        //三级标题
        div.heading
          div.the-title
            div.the-title1
              span Heading 3&nbsp;&nbsp;&nbsp;
          div.the-title
            div.the-title2
              span Heading 3&nbsp;&nbsp;&nbsp;
          div.the-title
            div.the-title3
              span Heading 3&nbsp;&nbsp;&nbsp;
      //分类
      div.classification.clearfix
        //分类标准
        div.classify.clearfix
          span 课程分类 :
          ul
            li(v-for="(item,index) in courseClass"  @click="getCourseNameFL(item,index)"  :class="index === iscourseClass?'Greens':''") {{ item.name }}
        div.classify.clearfix
          span 课时 :
          ul
            li(v-for="(item,index) in timeClass" @click="getClassHour(item,index)"  :class="index === istimeClass?'Greens':''") {{ item }}
        div.classify.clearfix
          span 学分 :
          ul
            li(v-for="(item,index) in credits" @click="getCredits(item,index)"  :class="index === iscredits?'Greens':''") {{ item }}
        div.classify.clearfix
          span 年份 :
          ul
            li(v-for="(item,index) in year" @click="getYear(item,index)"  :class="index === isyear?'Greens':''") {{ item }}
      <!--综合排序-->
      div.zonghe
        div.zonghe-left
          div.sort
            div.sort-paixu
              ul
                <!--li( v-for="(item,index) in sorting" @click="isColor(item,index)" :class="index === isSorting?'GreensPlus':''").sortLi {{ item.title }}&nbsp;&nbsp;&nbsp;&nbsp;|-->
                li(@click="getClear()" :class="{GreensPlus: index===1}") 综合排序&nbsp;&nbsp;&nbsp;&nbsp;|
                li(@click="getUpdateDate()" :class="{GreensPlus: index===2}") 更新时间&nbsp;&nbsp;&nbsp;&nbsp;|
                li(@click="getHits()" :class="{GreensPlus: index===3}") 点击率&nbsp;&nbsp;&nbsp;&nbsp;|
          <!--课程视频连接-->
          ul.shipin-ul
            li.shipin-li(v-for="(kc, index) in kcData.slice((currentPage-1)*pagesize,currentPage*pagesize)")
              div.shipin
                router-link(:to="{path:'/videopage/'+kc.id}")
                  div.shipinKcheng
                    div.tupian
                      img(:src="kc.photo").picture
                      span.keshi 课时 {{kc.classHour}}
                      span.xuefen 学分 {{kc.credit}}
                  p.mingcheng
                    a(href="#" ) {{kc.name}}
                  p
                    a( href="#" class="jianjie") {{kc.introduction}}
                  p
                    a( href="#" class="chakan" @click="getVideos()") 查看更多→
          div.paging
            el-pagination(
            @current-change="current_change"
            layout="prev, pager, next"
            :total="total")
        div.zonghe-right
          div.zonghe-img
            <!--img(src="/static/PublicCourse/u804.png" )-->
            img(:src="bottomSrc")
          div.kecheng
            span.tuijian 推荐
            span 课程
          div.kecheng-name
            div.kecheng-name1(v-for="hc in hcData")
              router-link(:to="{path:'/videopage/'+hc.cid}")
                div.kecheng-img.clearfix
                  <!--img(src="/static/PublicCourse/u798.png" )-->
                  img(:src="hc.photo")
                div.kecheng-right
                  p.tl {{hc.cname}}
                  p.tt {{hc.uname}}
                  p.tt  课时 {{hc.classHour}}
                    span.te 学分 {{hc.credit}}
                div.clear
</template>

<script type="text/ecmascript-6">
  import FormModel from './model'
  import Message from '../../common/message'

  export default {
    data() {
      return {
        formModel: Object.assign({}, FormModel),
        hcData: [],
        kcData: [],
        topSrc: '',
        bottomSrc: '',
        courseClass: [],
        timeClass: ['0-10', '10-20', '20-30', '30以上'],
        credits: ['0-2', '2-5', '5-8', '8分以上'],
        year: ['2015', '2016', '2017', '2018', '2019'],
        iscourseClass: '',
        istimeClass: '',
        iscredits: '',
        isyear: '',
        courseName: null,
        isSorting: 0,
        index: '',
        total: null, // 默认数据总数
        pagesize: 12, // 每页的数据条数
        currentPage: 1 // 默认开始页面
        // sorting: [
        //   {title: '综合排序'},
        //   {title: '观看人数'},
        //   {title: '更新时间'}
        // ]
      }
    },
    mounted() {
      this.getImg()
      this.getHotlists()
      this.getCourseByData()
      this.getCourseName()
    },
    methods: {
      current_change(currentPage) {
        this.currentPage = currentPage
      },
      getImg() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/imgss/getImgByType',
          params: {
            'type': '精品课'
          }
        }).then(res => {
          console.log('img res.data----------------------:', res.data.data[0].imgUrl)
          this.topSrc = res.data.data[0].imgUrl
          this.bottomSrc = res.data.data[1].imgUrl
        })
      },
      getHotlists() { // 推荐课程
        console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/hotlistsCourses/getAllHotlistsCourse',
          params: {}
        }).then(res => {
          console.log('this.hcData-------------------------:', res.data.data)
          this.hcData = res.data.data
          // console.log('this.hcData-------------------------:', this.hcData)
        })
      },
      /*
      * 课程分类
      * */
      // getCourse() { // 所有精品课
      //   let jsonStr = '{"gid":"2"}' // 课程的id
      //   this.axios.request({
      //     method: 'GET',
      //     url: '/camel/rest/training/course',
      //     params: {
      //       jsonStr: jsonStr
      //     }
      //   }).then(res => {
      //     console.log('this.kcData-------------------------:', res.data.data)
      //     this.kcData = res.data.data
      //     this.total = this.kcData.length / this.pagesize * 10
      //     // console.log('this.kcData-------------------------:', this.kcData)
      //   })
      // },
      getName() { // 搜索课程名称获取数据
        this.formModel.name = this.courseName
        this.getCourseByData()
      },
      getCourseName() { // 课程分类名称
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/courseName',
          params: {}
        }).then(res => {
          console.log('getCourseName-------------------------:', res.data.data)
          this.courseClass = res.data.data
        })
      },
      getCourseByData() { // 多条件查询及排序功能
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/course/getCourseByData',
          params: {
            gid: '2',
            name: this.formModel.name,
            classHour: this.formModel.classHour,
            credit: this.formModel.credit,
            year: this.formModel.chooseYear,
            sort: this.formModel.sort
          }
        }).then(res => {
          console.log('getCourseByData-------------------------:', res.data.data.length)
          if (res.data.data.length !== 0) {
            this.kcData = res.data.data
            this.total = this.kcData.length / this.pagesize * 10
          } else {
            Message.info('暂无数据')
            this.kcData = []
            this.total = null
          }
        })
      },
      /*
      * 课程分类
      * */
      getCourseNameFL(item, index) { // 点击课程分类获取数据
        console.log('getCourseNameFL-------:', item.name)
        if (this.iscourseClass !== index) {
          this.iscourseClass = index
          this.formModel.name = item.name
          this.getCourseByData()
        } else {
          this.iscourseClass = ''
          this.formModel.name = null
          this.getCourseByData()
        }
      },
      getClassHour(item, index) { // 点击课时获取数据
        console.log('getClassHour-------:', item)
        if (this.istimeClass !== index) {
          this.istimeClass = index
          this.formModel.classHour = item
          this.getCourseByData()
        } else {
          this.istimeClass = ''
          this.formModel.classHour = null
          this.getCourseByData()
        }
      },
      getCredits(item, index) { // 点击学分获取数据
        console.log('getCredits-------:', item)
        if (this.iscredits !== index) {
          this.iscredits = index
          this.formModel.credit = item
          this.getCourseByData()
        } else {
          this.iscredits = ''
          this.formModel.credit = null
          this.getCourseByData()
        }
      },
      getYear(item, index) { // 点击年份获取数据
        console.log('getYear-------:', item)
        if (this.isyear !== index) {
          this.isyear = index
          this.formModel.chooseYear = item
          this.getCourseByData()
        } else {
          this.isyear = ''
          this.formModel.chooseYear = null
          this.getCourseByData()
        }
      },
      isColor(item, index) {
        this.isSorting = index
      },
      getClear() { // 综合排序，清空
        this.index = 1
        this.formModel.sort = null
        this.getCourseByData()
      },
      getUpdateDate() {
        this.index = 2
        this.formModel.sort = 'updateDate'
        this.getCourseByData()
      },
      getHits() { // 按照点击率进行排序
        this.index = 3
        this.formModel.sort = 'hits'
        this.getCourseByData()
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .w
    width 1200px
    margin 0 auto
    -webkit-scrollbar display none

  .fl
    float left

  .fr
    float right

  ul li
    padding 0
    margin 0
    list-style none

  img
    width auto
    max-width 100%
    border 0

  a
    text-decoration none
    color #000

  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .clear
    clear both

  .box
    margin-top 20px

  .box .title-img img
    width 100%
    height 200px

  .place
    font-size 18px
    margin-top 2%

  .gongkai
    color #008F95

  /*搜索框*/
  .box .search-two
    width 350px
    margin 0 auto
    margin-top 18px
    position relative

  .box .search-one
    width 350px
    height 30px
    border-radius 5px
    box-sizing border-box
    border 2px solid #CCCCCC
    position relative

  .box .search-three
    position absolute
    left 314px
    top 4px
    width 20px
    height 20px
    cursor pointer

  .box .search
    position absolute
    left 14px
    top 6px

  /*margin-left 14px*/
  /*margin-top 2px*/
  .box .search input
    width 280px
    border none
    outline none
    color rgb(153, 153, 153)
    font-size 13px

  /* 三级标题 */
  .heading
    width 220px

  .heading .the-title
    float left
    font-size 10px
    color #CCCFDA

  /*white-space nowrap*/
  /*待定*/
  .classification
    font-size 14px
    margin-top 40px

  .classify
    margin-top 20px

  .classify span
    display inline-block
    width 70px
    text-align right
    float left
    margin-right 38px

  .classify ul
    -o-user-select none /*文字禁止被选中*/
    -moz-user-select none /*火狐 firefox*/
    -webkit-user-select none /*webkit浏览器*/
    -ms-user-select none /*IE10+*/
    -khtml-user-select none /*早期的浏览器*/
    user-select none

  .classify li
    display inline-block
    width 70px
    text-align center
    float left
    margin 0 10px
    cursor pointer

  /*综合排序*/
  .zonghe
    margin-top 40px
    width 100%
    height 890px

  /*background-color red*/
  /*左边*/
  .zonghe-left
    width 66.7%
    height 100%
    /*background-color green*/
    float left
    position relative

  .zonghe-left .sort
    width 800px
    height 40px
    border 1px solid #CCCCCC
    box-sizing border-box
    background-color #E6F4F5

  .sort .sort-paixu
    /*height 40px*/
    /*margin-top 0*/
    margin-left 40px

  .sort-paixu li
    /*float left*/
    display inline-block
    height 40px
    line-height 40px
    margin-right 20px
    color #999
    cursor pointer

  .shipin
    width 170px
    height 230px
    margin-top 30px
    background-color #fff

  .shipin-ul
    width 800px
    margin 0
    padding 0
    list-style none
    margin-top 18px

  /*justify-content stretch*/
  .shipin-li
    display inline-block
    margin 0 14px 0 14px

  .shipin .shipinKcheng
    position relative

  .shipin p
    margin-bottom 14px

  .shipin .shipinKcheng .tupian
    width 170px
    height 120px
    position relative

  .picture
    width 170px
    height 120px

  .shipin .shipinKcheng .keshi
    position absolute
    left 56px
    bottom 10px
    width 48px
    height 18px
    line-height 18px
    background-color rgba(0, 0, 0, 0.5)
    border-radius 10px
    text-align center
    font-size 12px
    color #fff

  .shipin .shipinKcheng .xuefen
    position absolute
    left 112px
    bottom 10px
    width 48px
    height 18px
    line-height 18px
    background-color rgba(0, 0, 0, 0.5)
    border-radius 10px
    text-align center
    font-size 12px
    color #fff

  /*课程简介*/
  .jianjie
    color #9999B2
    font-size 14px
    margin-top 10px

  /*查看更多*/
  .chakan
    color #6CC1FD
    font-size 14px

  /*右边*/
  .zonghe-right
    width 30%
    height 100%
    /*background-color blue*/
    float right

  .zonghe-right .zonghe-img img
    width 100%
    height 120px
    border-radius 5px

  .kecheng
    font-size 24px
    margin-top 34px
    margin-bottom 22px
    letter-spacing 10px

  .kecheng .tuijian
    color #008F95

  .kecheng-name1
    width 100%
    height 110px
    background-color #FDF7E6
    border-radius 5px
    overflow hidden
    margin-bottom 20px

  .kecheng-name1 a
    display block
    width 100%
    height 100%

  .kecheng-name1 .kecheng-img
    float left

  .kecheng-img img
    width 110px
    height 110px
    border-radius 4px

  .kecheng-right
    float left
    margin-left 15px
    padding-top 16px
    width 230px

  .kecheng-name1 .kecheng-right p
    margin 0
    margin-bottom 14px

  .tl
    font-size 18px
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .tt
    font-size 14px
    color #99A4B8

  .te
    margin-left 16px

  .boot-paging
    border none
    margin-left 166px

  .Greens
    color #008F95
    font-weight 700

  .GreensPlus
    color #008F95 !important

  // 分页
  .paging
    position absolute
    left 50%
    bottom 0
    transform translate(-50%)

  .mingcheng
    margin-top 20px
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis
</style>
